<template>
  <div class="am-u-sm-12 am-u-md-12 am-u-lg-12 student-reg" >
    <div class="widget am-cf">
      <div class="widget-head am-cf">
        <div class="widget-title am-fl">沟通登记</div>
        <div class="widget-function am-fr">
          <button type="button" class="am-btn am-btn-default" @click="$router.go(-1)">返回</button>
        </div>
      </div>
      <div class="am-padding-sm">
        <table style="width: 100%">
          <tr>
            <td rowspan="2" class="am-text-middle">{{formData.name}}</td>
            <td>学号：{{formData.studentNo}}</td>
            <td>年级：{{formData.gradeName}}</td>
          </tr>
          <tr>
            <td>电话：{{formData.phoneNo}}</td>
            <td>就读学校：{{formData.school}}</td>
          </tr>
        </table>
      </div>
      <div class="widget-body am-fr">

        <div id="tabs"  class="am-tabs" data-am-tabs="{noSwipe: 1}" >
          <ul class="am-tabs-nav am-nav am-nav-tabs">
            <li class="am-active"><a href="javascript: void(0)">沟通登记</a></li>
            <li><a href="javascript: void(0)" @click="tabIndex = 1">沟通历史</a></li>
          </ul>

          <div class="am-tabs-bd am-tabs-bd-ofv">
            <div class="am-tab-panel am-active">
              <CommunicationRegIndex ></CommunicationRegIndex>
            </div>
            <div class="am-tab-panel">
              <CommunicationRegHistory></CommunicationRegHistory>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>
<style>

  .widget table{
    background: #eee;
  }
  .am-u-sm-12 tr{
    text-align: left;
  }
  .am-text-middle{
    font-size: 45px;
    text-align: center !important;
  }
</style>
<style scoped>
  .am-nav-tabs {
    background-color: #eef1f6;
  }
  .am-tabs-bd {
    border-color: #dfe6ec;
    user-select: text!important;
  }
  .am-nav-tabs>li>a {
    color: #666;
    font-size: 14px;
  }
  .am-nav-tabs>li.am-active>a{
    color: #0e90d2;
  }
  .am-nav>li>a:hover{
    background-color: #eef1f6;
    color: #333333;
  }
  .am-nav-tabs>li.am-active>a:hover{
    background-color: #fff;
    color: #0e90d2;
  }
</style>

<script>
  import io from '../../lib/io'
  import conf from '../../lib/conf'
  import util from '../../lib/util'
  import CommunicationRegIndex from './CommunicationRegIndex'
  import CommunicationRegHistory from './CommunicationRegHistory'
  export default{
    data(){
      return {
        studentId : this.$route.query.studentId ,
        studentCommunicateId: this.$route.query.studentCommunicateId,
        tabIndex : 0 ,
        formData:[],
        mainAccount:{}
      }
    },
    components:{
        CommunicationRegIndex,
        CommunicationRegHistory
    },
    created: function () {
        this.loadStudent();
      this.loadMainAccount()
      var _this  = this
      this.$root.$on('mainAccount:change',function(){
        _this.loadMainAccount()
      })
      this.$root.$on('studentReg:changeTabIndex',function(tabIndex){
        _this.tabIndex =  tabIndex
        console.log(_this.tabIndex)
      })
      console.log(_this.tabIndex)
      //init tabs
      $('#tabs').tabs();
    },
    mounted: function () {
    },
    methods: {
      loadMainAccount:function(){
        var _this = this
        io.post(io.apiAdminStudentMainAccount,{
          studentId : _this.studentId
        },function(ret){
          if(ret.success){
            _this.mainAccount = ret.data || { balanceAmount : 0 }
          }else{
            _this.$alert(ret.desc)
          }
        })
      },
      loadStudent(){
        io.post(io.apiAdminStudentDetail, {studentId: this.studentId},
          (ret) => {
            if (ret.success) {
              this.formData = ret.data.student
        }})
      }

    }
  }
</script>
